<template>
  <div class="code-create">
    <div>
      <div class="word">选择类型</div>
      <div class="select">
        <el-select @change="changType" v-model="type" placeholder="请选择你所需要的代码类型">
          <el-option v-for="(x, y) in codeList" :key="y" :value="x.label">
            {{ x.label }}
          </el-option>
        </el-select>
      </div>
      <div class="btn">
        <el-button @click="copy">复制</el-button>
      </div>
    </div>
    <div>
      <div class="word"></div>
      <div class="input">
        <el-input v-model="code" :rows="20" type="textarea" disabled />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import element  from '@/utils/element';
import codeList from '@/utils/codes'
const type = ref('')
const code = ref('')
const changType = (e) => {
  getCode(e)
}
const getCode = (str) => {
  type.value = str
  code.value = codeList.filter(x => x.label == str)[0].code
}
const copy = () => {
  navigator.clipboard.writeText(code.value).then(() => {
    element.success('复制成功')
  })
}
onMounted(() => {
  getCode(codeList[0].label)
})
</script>

<style scoped lang="scss">
.code-create {
  >div {
    display: flex;
    margin-bottom: 10px;

    .word {
      width: 100px;
      color: #ccc;
      display: flex;
      font-size: 14px;
      justify-content: center;
      align-items: center;
    }

    .input {
      width: 600px;
    }

    .select {
      width: 300px;
    }

    .btn {
      width: 60px;
      margin-left: 10px;
    }
  }
}
</style>
